<!DOCTYPE html>
<html>
<head>
    <title>我的数据</title>
<#include "/common/include_header.ftl">

    <style>
        .chartImg:hover {
            background-color: #eee;
            box-shadow: 0 0 12px 5px #bbb ;
        }
        .chartImg:active {
            background-color: #eee;
            box-shadow: 0 0 12px 5px #aaa ;
        }
    </style>







</head>
<body>

<#include "/common/include_top.ftl">

<div class="layui-container fly-marginTop fly-user-main">

<#include "/common/include_menu.ftl">

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="fly-panel fly-panel-user" pad20>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend style="font-size: 40px;">创建我的图表</legend>
        </fieldset>


        <hr class="layui-bg-black">

        <fieldset class="layui-elem-field" style="margin-top: 20px;">
            <legend>1.选择你的数据</legend>

            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title" id="LAY_mine">
                    <li data-type="mine-jie" lay-id="index" class="layui-this">我的表格数据（<span>${tableData?size}</span>）</li>
                    <li data-type="collection" data-url="/collection/find/" lay-id="collection">我的文本数据（<span>${jsonData?size}</span>）
                    </li>
                </ul>

                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">

                        <ul class="mine-view jie-row">

                        <#list tableData as data>
                            <li>
                                <a onclick="selectData('${data.id}')" class="jie-title tableTitle">${data.title}</a>
                                <i>${data.createTime}</i>

                            <#--<button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出</button>-->

                            <#--<em>${data.readNum}阅/${data.likeNum}喜欢/${data.collectNum}收藏</em>-->
                            </li>
                        </#list>

                        </ul>
                        <div id="LAY_page"></div>
                    </div>
                    <div class="layui-tab-item">
                        <ul class="mine-view jie-row">

                        <#--<#list jsonData as data>-->
                            <#--<li>-->
                                <#--<a onclick="selectData('${data.id}')" class="jie-title tableTitle">${data.title}</a>-->
                                <#--<i>${data.createTime}</i>-->
                            <#--</li>-->
                        <#--</#list>-->
                        </ul>
                        <div id="LAY_page1"></div>
                    </div>
                </div>
            </div>

        </fieldset>


        <fieldset class="layui-elem-field" id="two" style="margin-top: 20px;display:none;">
            <legend>2.选择字段</legend>
            <br>
            <div class="layui-form" >

                <input type="checkbox" value="1" id="valueA" name="" title="valueA" >
                <input type="checkbox" value="1" id="valueB" name="" title="valueB" >
                <input type="checkbox" value="1" id="valueC" name="" title="valueC" >
                <input type="checkbox" value="1" id="valueD" name="" title="valueD" >
                <input type="checkbox" value="1" id="valueE" name="" title="valueE" >
                <button onclick="selectColumn()" class="layui-btn layui-btn-normal layui-btn-sm">确认</button>
            </div>


            <table class="layui-hide" id="tableData"></table>


        </fieldset>


        <fieldset id="three" class="layui-elem-field" style="margin-top: 20px;display:none;">
            <legend>3.选择图表</legend>

            <div class="layui-row">
            <#list chartImgs as chartImg >
                <div class="layui-col-md4 chartImg" style="margin-top: 12px;padding: 10px;">
                    <img width="275" src="/static/images/chartImg/${chartImg}.png">
                    <input style="display: none;" value="${chartImg}" >
                </div>
            </#list>


            </div>

        </fieldset>

        <div class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button onclick="submits()" class="layui-btn" >立即提交</button>
                </div>
            </div>
        </div>

    </div>

    <input style="display: none;" id="dataIdValue">
    <input style="display: none;" id="chartValue">

    <script>
        
        function submits() {
            var dataIdValue = $("#dataIdValue").val();
            var chartValue = $("#chartValue").val();
            var valA = $("#valueA").is(':checked');
            var valB = $("#valueB").is(':checked');
            var valC = $("#valueC").is(':checked');
            var valD = $("#valueD").is(':checked');
            var valE = $("#valueE").is(':checked');

            if (hasNull(dataIdValue, chartValue)) {
                layer.msg("请选全数据", {icon: 2});
            } else if (valA || valB || valC || valD || valE) {
                $.ajax({
                <#--url: '${basePath}/data/doSave',-->
                    url: '/chart/save',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        dataId: dataIdValue ,
                        pageName: chartValue ,
                        valueA: valA ,
                        valueB: valB ,
                        valueC: valC ,
                        valueD: valD ,
                        valueE: valE

                    },
                    success: function (rd) {
                        if (rd.suc) {
                            window.location.href = "${basePath}/chart/list";
                        } else {
                            layer.msg(rd.msg, {icon: 2});
                        }
                    }
                });
            } else {
                layer.msg("请至少选择一个字段", {icon: 2});
            }

        }

        $(".chartImg").on('click',function(e){
            $(".chartImg").css("background-color","");
            $(".chartImg").css("box-shadow","");
            $(this).css("background-color","#eee");
            $(this).css("box-shadow","0 0 12px 5px #bbb inset");


            $("#chartValue").val($(this).children('input').val());
//            console.log();
        });
        
        function selectColumn() {
            var valA = $("#valueA").is(':checked');
            var valB = $("#valueB").is(':checked');
            var valC = $("#valueC").is(':checked');
            var valD = $("#valueD").is(':checked');
            var valE = $("#valueE").is(':checked');

            console.log(valA + " " + valB + " " + valC + " " + valD);

            $("#three").show(500);


        }

        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#tableData'
//                , url: '/json/data/5af7d952af08020dfc86ca42/info/'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
//                    {field:'id', width:80, title: 'ID', sort: true}
//                    ,{field:'dataId', width:80, title: '用户名'}
                    {field: 'name', width: 80, title: '用户名'}

                    , {field: 'valueA', title: 'valueA', sort: true}
                    , {field: 'valueB', title: 'valueB', sort: true}
                    , {field: 'valueC', title: 'valueC', sort: true}
                    , {field: 'valueD', title: 'valueD', sort: true}
                    , {field: 'valueE', title: 'valueE', sort: true}
//                    ,{field:'city', width:80, title: '城市'}
//                    ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
//                    ,{field:'experience', title: '积分', sort: true}
//                    ,{field:'score', title: '评分', sort: true}
//                    ,{field:'classify', title: '职业'}
//                    ,{field:'wealth', width:137, title: '财富', sort: true}
                ]]
            });

            $('.tableTitle').on('click', function () {
                var dataId = $("#dataIdValue").val();
                table.render({
                    elem: '#tableData'
                    , url: '/json/data/' + dataId + '/info/'
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[
                        {field: 'name', width: 80, title: '用户名'}

                        , {field: 'valueA', title: 'valueA', sort: true}
                        , {field: 'valueB', title: 'valueB', sort: true}
                        , {field: 'valueC', title: 'valueC', sort: true}
                        , {field: 'valueD', title: 'valueD', sort: true}
                        , {field: 'valueE', title: 'valueE', sort: true}
                    ]]
                });
                table.render.url = '/json/data/5af7d952af08020dfc86ca42/info/';
//                var type = $(this).data('type');
//                active[type] ? active[type].call(this) : '';

                $.ajax({
                    url: '${basePath}/json/data/' + dataId,
                    type: 'post',
                    dataType: 'json',
                    success: function (rd) {
                        if (rd) {
                            $("#valueA").attr("title", rd.data.valueAName);
                            $("#valueB").attr("title", rd.data.valueBName);
                            $("#valueC").attr("title", rd.data.valueCName);
                            $("#valueD").attr("title", rd.data.valueDName);
                            $("#valueE").attr("title", rd.data.valueEName);
                            <#--window.location.href = "${basePath}/chart/list";-->
                        } else {
                            layer.msg(rd.msg, {icon: 2});
                        }
                    }
                });
            });
        });

        function selectData(id) {

            var table = layui.table;
            $("#dataIdValue").val(id);

            $("#two").show(500);

            table.render.url = '/json/data/5af7d952af08020dfc86ca42/info/';

        }


    </script>
</div>
</div>





<#include "/common/include_footer.ftl">
<#include "/common/include_js.ftl">
</body>
</html>